<section>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-sm-12">
                <article>

                    <div class="hidden-md hidden-lg sec-nav">
                        <h2>Build-in Themes</h2>
                        <p>

                            <?php
                            foreach ($themes as $t){
                                echo '<a class="btn btn-primary btn-sm" href="Theme.', $t, '.html">', $t, '</a>';
                            }
                            ?>
                        </p>
                    </div>

                        <h2><?php echo $theme; ?> <small>Theme</small></h2>

                        <h3>Inline</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                            <code data-enlighter-language="js" data-enlighter-theme="<?php echo $theme; ?>">window.addEvent('domready', function(){});</code> invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>

                        <h3>Block <small>with Line-Numbers</small></h3>
                        <pre data-enlighter-language="html" data-enlighter-theme="<?php echo $theme; ?>">
&lt;head&gt;
		&lt;!-- Include EnlighterJS Styles --&gt;
		&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../Build/EnlighterJS.yui.css&quot; /&gt;

		&lt;!-- Include MooTools Framework --&gt;
		&lt;script type=&quot;text/javascript&quot; src=&quot;mootools-core-1.4.5-full-nocompat.js&quot;&gt;&lt;/script&gt;

		&lt;!-- Include EnlighterJS --&gt;
		&lt;script type=&quot;text/javascript&quot; src=&quot;../Build/EnlighterJS.yui.js&quot; &gt;&lt;/script&gt;

		&lt;!-- Initialize EnlighterJS --&gt;
		&lt;script type=&quot;text/javascript&quot;&gt;
		window.addEvent('domready', function() {
			// highlight all pre tags
			document.getElements('pre').enlight({
				indent : 2
			});
		});
		&lt;/script&gt;
&lt;/head&gt;
</pre>

                    <h3>Block <small>without Line-Numbers</small></h3>
                        <pre data-enlighter-language="html" data-enlighter-theme="<?php echo $theme; ?>" data-enlighter-linenumbers="false">
&lt;head&gt;
		&lt;!-- Include EnlighterJS Styles --&gt;
		&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../Build/EnlighterJS.yui.css&quot; /&gt;

		&lt;!-- Include MooTools Framework --&gt;
		&lt;script type=&quot;text/javascript&quot; src=&quot;mootools-core-1.4.5-full-nocompat.js&quot;&gt;&lt;/script&gt;

		&lt;!-- Include EnlighterJS --&gt;
		&lt;script type=&quot;text/javascript&quot; src=&quot;../Build/EnlighterJS.yui.js&quot; &gt;&lt;/script&gt;

		&lt;!-- Initialize EnlighterJS --&gt;
		&lt;script type=&quot;text/javascript&quot;&gt;
		window.addEvent('domready', function() {
			// highlight all pre tags
			document.getElements('pre').enlight({
				indent : 2
			});
		});
		&lt;/script&gt;
&lt;/head&gt;
</pre>

                        <h3>With Tabs</h3>
                        <pre data-enlighter-language="js" data-enlighter-group="group_<?php echo $theme; ?>" data-enlighter-title="Enlighter-Javascript" data-enlighter-theme="<?php echo $theme; ?>">
// Load language parser
language = new EnlighterJS.Language[languageName](this.getRawCode(true));

// compile tokens -> generate output
var output = this.renderer.render(language, specialLines, {
	lineOffset: (this.rawCodeblock.get('data-enlighter-lineoffset') || null),
	lineNumbers: (this.rawCodeblock.get('data-enlighter-linenums') !== 'false')
});

// set class and id attributes.
output.addClass(themeName.toLowerCase() + 'EnlighterJS');
output.addClass('EnlighterJS');
output.set('id', 'EnlighterJS_' + String.uniqueID());
</pre>
                        <pre data-enlighter-language="java" data-enlighter-group="group_<?php echo $theme; ?>" data-enlighter-title="pure Java">
// Source:  http://en.wikipedia.org/wiki/Java_%28programming_language%29
// OddEven.java
import javax.swing.JOptionPane;

public class OddEven {
    /**
     * "input" is the number that the user gives to the computer
     */
    private int input; // a whole number("int" means integer)

    /**
     * This is the constructor method. It gets called when an object of the OddEven type
     * is being created.
     */
    public OddEven() {
        /*
         * In most Java programs constructors can initialize objects with default values, or create
         * other objects that this object might use to perform its functions. In some Java programs, the
         * constructor may simply be an empty function if nothing needs to be initialized prior to the
         * functioning of the object. In this program's case, an empty constructor would suffice.
         * A constructor must exist; however, if the user doesn't put one in then the compiler
         * will create an empty one.
         */
    }
}
</pre>
                        <pre data-enlighter-language="php" data-enlighter-group="group_<?php echo $theme; ?>" data-enlighter-title="Awesome PHP Script">
/** Test Snippet */
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

/* Create table doesn't return a resultset */
if ($mysqli->query("CREATE TEMPORARY TABLE myCity LIKE City") === TRUE) {
    printf("Table myCity successfully created.\n");
}

/* Select queries return a resultset */
if ($result = $mysqli->query("SELECT Name FROM City LIMIT 10")) {
    printf("Select returned %d rows.\n", $result->num_rows);

    /* free result set */
    $result->close();
}
</pre>

                </article>

            </div>

            <div class="col-md-2 hidden-xs hidden-sm">
                <h4>Build-in Themes</h4>
                <ul id="content-nav">
                    <?php
                    foreach ($themes as $t){
                        echo '<li class="', ($t == $theme) ? 'spyActive': '', '"><a href="Theme.', $t, '.html">', $t, '</a></li>';
                    }
                    ?>
                </ul>

                <div id="ToTop">
                    <a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
                </div>
            </div>
        </div>
    </div>
</section>